<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">

<title>ASUS Wireless Router <#Web_Title#> - <#menu4_2#> : <#menu4_2_1#></title>

<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/bootstrap/css/main.css">

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script language="JavaScript" type="text/javascript" src="state.js"></script>
<script language="JavaScript" type="text/javascript" src="general.js"></script>
<script language="JavaScript" type="text/javascript" src="popup.js"></script>
<script language="JavaScript" type="text/javascript" src="help.js"></script>
<script language="JavaScript" type="text/javascript" src="tmmenu.js"></script>
<script language="JavaScript" type="text/javascript" src="tmcal.js"></script>

<script>
var $j = jQuery.noConflict();

var week = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var pointLoc = 0;
var vWidth = 1000;
var vHeight = 300;
var crossH = 0;
var crossV = 0;
var maxV = 0;
var maxL = 0;
var time24 = 0;
var advX = 1;
var interval = 0;
var hours = 0;
var xpstVis = 1;
var ignoreNext = 0;
var eraseL = 0;
var samp = 1;

function E(id)
{
	return document.getElementById(id);
	//return $j('#' + id);
}

function pad(n)
{
	n = n.toString();
	while (n.length < 2) n = '0' + n;
	return n;
}

function xps(n)
{
	n /= 1024;
	return n.toFixed(2) + ' KB/s';
}

function setText(e, text)
{
	// Adobe/IE doesn't do textContent=
	if (e.firstChild) e.removeChild(e.firstChild);
	e.appendChild(document.createTextNode(text));
}

function init(ev)
{
	var n;
	var obj = E('svgraph');
	vWidth = $j("#chart").width() - ($j.browser.msie ? 12 : 0);

	obj.addEventListener("mousemove", mMove, false);
	obj.addEventListener("mousedown", mClick, false);


//  if (typeof(svgDocument) == 'undefined') svgDocument = ev.srcElement.ownerDocument;

	crossX = E('crossX');
	crossY = E('crossY');
	polyRx = E('polyRx');
	polyTx = E('polyTx');
	pointTextBack = E('pointTextBack');
	pointText = E('pointText');
	pointG = E('pointGroup');
	crossTextBack = E('crossTextBack');
	crossText = E('crossText');
	crossTime = E('crossTime');
	background = E('background');
  hori = E('hori');

	tickLines = [];
	for (n = 0; n < 24; ++n) {
		tickLines[n] = E('tick' + n);
	}
	tickHours = [];
	for (n = 0; n < 12; ++n) {
		tickHours[n] = E('h' + n);
	}

	xpst = [];
	for (n = 0; n < 4; ++n)
		xpst[n] = E('xpst' + n);

	time24 = ((new Date(2000, 0, 1, 23, 0, 0, 0)).toLocaleString().indexOf('23') != -1);

	top.updateSVG = updateSVG;
	top.svgReady = 1;
	top.initData();
}

function drawData(poly, data, mode, color)
{
	var i;
	var pt;
	var x, y;
	var d, j;

	if (data.length == 0) return;

	x = 0;
	if (mode == 0) {
		poly.setAttribute('fill-opacity', '0.5');
		pt = '0,' + vHeight;
	}
	else {
		poly.setAttribute('fill-opacity', '0');
		pt = '';
	}
	poly.setAttribute('stroke', color);
	poly.setAttribute('fill', color);

	for (i = data.length - maxL; i < data.length; ++i) {
		if (i < 0) {
			d = 0;
		}
		else if (i >= samp) {
			d = 0;
			for (j = samp - 1; j >= 0; --j) {
				d += data[i - j];
			}
			d /= (dataDiv * samp);
		}
		else {
			d = data[i] / dataDiv;
		}
		y = (vHeight - Math.floor((d * vHeight) / maxV))
		pt += ' ' + Math.floor(x) + ',' + y;
		x += advX;
	}
	pt += ' ' + (vWidth + 5) + ',' + y + ' ' + (vWidth + 10) + ',' + vHeight;
	poly.setAttribute('points', pt);
}

function updateSVG(rxData, txData, maxValue, mode, rxColor, txColor, intv, maxLen, dataD, avgSamp, clock)
{
	var x, y, z, i;
	var v, e;

	maxV = maxValue;
	interval = intv;
	maxL = maxLen;
	advX = vWidth / maxL;
	dataDiv = dataD;
	samp = avgSamp;

	tockD = clock;
//	tockD = new Date();
	tock = tockD.getTime();

	if (intv < 60) {
		// realtime
		x = z = (vWidth / 5);
		for (i = 0; i < 4; ++i) {
			tickLines[i].setAttribute('x1', Math.round(x));
			tickLines[i].setAttribute('x2', Math.round(x));
			x += z;
		}
	}
	else {
		advM = (60 / interval) * advX;
		x = (60 - tockD.getMinutes()) * advM;
		v = advM * 60;
		for (i = 0; i < 24; ++i) {
			z = Math.round(x);
			y = (new Date(tock - (Math.round((vWidth - z - 1) / advX) * interval * 1000))).getHours();
			x += v;

			e = tickLines[i];
			e.setAttribute('x1', z);
			e.setAttribute('x2', z);
			e.setAttribute('class', (y & 1) ? 'a' : 'b');

			if ((y & 1) == 0) {
				e = tickHours[i >> 1];
				e.setAttribute('x', z);
				z = y % 24;
				if (!time24) {
					if (z < 12) {
						if (z == 0) z = 12;
						z += ' am';
					}
					else {
						z -= 12;
						if (z == 0) z = 12;
						z += ' pm';
					}
				}
				setText(e, z);
			}
		}
	}

	if (maxV <= 0) {
		polyRx.setAttribute('points', '');
		polyTx.setAttribute('points', '');
		return;
	}

	if (crossV > 0) drawCross(crossH, vHeight - Math.floor((crossV / maxV) * vHeight));
	drawData(polyRx, rxData, mode, rxColor);
	drawData(polyTx, txData, mode, txColor);

	setText(xpst[0], xps(maxV * 0.70));
	setText(xpst[1], xps(maxV * 0.5));
	setText(xpst[2], xps(maxV * 0.25));
	setText(xpst[3], xps(maxV));
	if (eraseL > 0) {
		if (--eraseL == 0) pointG.setAttribute('visibility', 'visible');
	}
}

function vY(y)
{
	return maxV - (maxV * (y / vHeight))
}

function pointTime(x)
{
	var t, hh, h, s;

	t = new Date(tock - (Math.round((vWidth - x - 1) / advX) * interval * 1000));
	h = t.getHours();
	s = week[t.getDay()] + ' ';
	if (time24)	{
		s += pad(h) + ':' + pad(t.getMinutes());
	}
	else {
		hh = h % 12;
		s += pad((hh == 0) ? 12 : hh) + ':' + pad(t.getMinutes()) + ((h < 12) ? ' am' : ' pm');
	}

	return s;
}

function mMove(ev)
{
	var x;

	if (maxV <= 0) return;
	if (ev.offsetX > (vWidth - 120)) {
		if (pointLoc == 0) {
			if (ev.offsetY < 30) {
				pointLoc = 1;
				pointText.setAttribute('y', '98%');
				pointTextBack.setAttribute('y', '283');
			}
		}
		else {
			if (ev.offsetY > (vHeight - 30)) {
				pointLoc = 0;
				pointText.setAttribute('y', '5%');
				pointTextBack.setAttribute('y', '1%');
			}
		}
	}

	setText(pointText, pointTime(ev.offsetX) + ' / ' + xps(vY(ev.offsetY)));

	x = 230;
	pointTextBack.setAttribute('x', (vWidth - x) - 22);
	pointTextBack.setAttribute('width', x + 20);
  pointText.setAttribute('style', 'text-anchor:end');
  pointG.setAttribute('visibility', 'visible');
	eraseL = 5;
}

function setXY(e, x, y)
{
	e.setAttribute('x', x);
	e.setAttribute('y', y);
}

function drawCross(x, y)
{
	var n;

	crossX.setAttribute('x1', x - 5);
	crossX.setAttribute('x2', x + 5);
	crossX.setAttribute('y1', y);
	crossX.setAttribute('y2', y);

	crossY.setAttribute('x1', x);
	crossY.setAttribute('x2', x);
	crossY.setAttribute('y1', y - 5);
	crossY.setAttribute('y2', y + 5);

//	n = Math.max(crossText.getComputedTextLength(), crossTime.getComputedTextLength()) + 20;
  n = 164;

	crossTextBack.setAttribute('width', n);

	if (x > (vWidth - n - 10)) {
		crossText.setAttribute('style', 'text-anchor:end');
		crossTime.setAttribute('style', 'text-anchor:end');
		crossTextBack.setAttribute('x', (x - n) - 10);
		x -= 20;
	}
	else {
		crossText.setAttribute('style', '');
		crossTime.setAttribute('style', '');
		crossTextBack.setAttribute('x', x + 10);
		x += 20;
	}

	crossTextBack.setAttribute('y', y - 17);
	setXY(crossTime, x, y - 5);
	setXY(crossText, x, y + 10);
}

function mClick(ev)
{
	if (ignoreNext) {
		ignoreNext = 0;
		return;
	}
	if (maxV <= 0) return;

	crossH = ev.offsetX;
	crossV = vY(ev.offsetY);
	setText(crossText, xps(crossV));
	setText(crossTime, pointTime(crossH));
	drawCross(ev.offsetX, ev.offsetY);
}
</script>

<script type='text/javascript'>
wan_route_x = '<% nvram_get_x("IPConnection", "wan_route_x"); %>';
wan_nat_x = '<% nvram_get_x("IPConnection", "wan_nat_x"); %>';
wan_proto = '<% nvram_get_x("Layer3Forwarding",  "wan_proto"); %>';
qos_enabled = '<% nvram_get_x("",  "qos_enable"); %>';
preferred_lang = '<% nvram_get_x("",  "preferred_lang"); %>';
chk_hwnat = '<% check_hwnat(); %>';

<% nvram("wan0_ifname,lan_ifname,wl_ifname,wan_proto,web_svg,rstats_colors"); %>

var cprefix = 'bw_r';
var updateInt = 2;
var updateDiv = updateInt;
var updateMaxL = 300;
var updateReTotal = 1;
var prev = [];
var speed_history = [];
var debugTime = 0;
var avgMode = 0;
var wdog = null;
var wdogWarn = null;

var ref = new TomatoRefresh('update.cgi', 'output=netdev', 2);

ref.stop = function() {
	this.timer.start(1000);
}

ref.refresh = function(text) {
	var c, i, h, n, j, k;

	watchdogReset();

	++updating;
	try {
		netdev = null;
		eval(text);

		n = (new Date()).getTime();
		if (this.timeExpect) {
			if (debugTime) E('dtime').innerHTML = (this.timeExpect - n) + ' ' + ((this.timeExpect + 2000) - n);
			this.timeExpect += 2000;
			this.refreshTime = MAX(this.timeExpect - n, 500);
		}
		else {
			this.timeExpect = n + 2000;
		}

		for (i in netdev) {
			c = netdev[i];
			if ((p = prev[i]) != null) {
				h = speed_history[i];

				h.rx.splice(0, 1);
				h.rx.push((c.rx < p.rx) ? (c.rx + (0xFFFFFFFF - p.rx)) : (c.rx - p.rx));

				h.tx.splice(0, 1);
				h.tx.push((c.tx < p.tx) ? (c.tx + (0xFFFFFFFF - p.tx)) : (c.tx - p.tx));
			}
			else if (!speed_history[i]) {
				speed_history[i] = {};
				h = speed_history[i];
				h.rx = [];
				h.tx = [];
				for (j = 300; j > 0; --j) {
					h.rx.push(0);
					h.tx.push(0);
				}
				h.count = 0;
			}
			prev[i] = c;
		}
		loadData();
	}
	catch (ex) {
	}
	--updating;
}

function watchdog()
{
	watchdogReset();
	ref.stop();
	//wdogWarn.style.display = '';
}

function watchdogReset()
{
	if (wdog) clearTimeout(wdog)
	wdog = setTimeout(watchdog, 10000);
}

function initB()
{
	if(qos_enabled=="0" && preferred_lang=="JP"){
		$('QoS_disabledesc').style.display="";
	}else{
		$('QoS_disabledesc').style.display="none";
	}
	
	if(chk_hwnat=="1" && preferred_lang=="JP"){
		$('HWNAT_disabledesc').style.display="";
	}else{
		$('HWNAT_disabledesc').style.display="none";
	}

	speed_history = [];

	initCommon(2, 0, 0, 1);
	wdogWarn = E('warnwd');
	watchdogReset();

	ref.start();
}

function switchPage(page){
	if(page == "1")
		
		return false;
	else if(page == "2")
		location.href = "/Main_TrafficMonitor_last24.asp";
	else
		location.href = "/Main_TrafficMonitor_daily.asp";
}
</script>

<style>
    .table tr th {border-top: 0 none; text-align: center;}
    #tab-area ul {margin-bottom: 0px;}
</style>
</head>

<body onload="show_banner(0); show_menu(4, -1, 0); show_footer(); initB();" >
<div class="container-fluid" style="padding-right: 0px">
    <div class="row-fluid">
        <div class="span2"><center><div id="logo"></div></center></div>
        <div class="span10" >
            <div id="TopBanner"></div>
        </div>
    </div>
</div>

<div id="Loading" class="popup_bg"></div>

<iframe name="hidden_frame" id="hidden_frame" src="" width="0" height="0" frameborder="0" style="position: relative;"></iframe>

<form method="post" name="form" action="../apply.cgi" >
<input type="hidden" name="current_page" value="Main_TrafficMonitor_realtime.asp">
<input type="hidden" name="next_page" value="Main_TrafficMonitor_realtime.asp">
<input type="hidden" name="next_host" value="">
<input type="hidden" name="sid_list" value="WLANConfig11b;">
<input type="hidden" name="group_id" value="">
<input type="hidden" name="modified" value="0">
<input type="hidden" name="action_mode" value="">
<input type="hidden" name="first_time" value="">
<input type="hidden" name="action_script" value="">
<input type="hidden" name="preferred_lang" id="preferred_lang" value="<% nvram_get_x("LANGUAGE", "preferred_lang"); %>">
<input type="hidden" name="wl_ssid2" value="<% nvram_get_x("WLANConfig11b",  "wl_ssid2"); %>">
<input type="hidden" name="firmver" value="<% nvram_get_x("",  "firmver"); %>">

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
            <!--=====Beginning of Main Menu=====-->
            <div class="well sidebar-nav side_nav" style="padding: 0px;">
                <ul id="mainMenu" class="clearfix"></ul>
                <ul class="clearfix">
                    <li>
                        <div id="subMenu" class="accordion"></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="span10">
            <!--Body content-->
            <div class="row-fluid">
                <div class="span12">
                    <div class="box well grad_colour_dark_blue">
                        <h2 class="box_head round_top"><#menu4#></h2>
                        <div class="round_bottom">
                            <div id="tabMenu"></div>
                            <div id='rstats'></div>
                            <div>
                                <div id="QoS_disabledesc" align="left" style="color:#FF3300;"><#TM_Note1#></div>
                                <div id="HWNAT_disabledesc" align="left" style="color:#FF3300;"><#TM_Note2#></div>
                                <div align="right" style="margin: 8px 8px 0px 0px;">
                                   <select onchange="switchPage(this.options[this.selectedIndex].value)" class="top-input">
                                        <option><#switchpage#></option>
                                        <option value="1" selected ><#menu4_2_1#></option>
                                        <option value="2"><#menu4_2_2#></option>
                                        <option value="3"><#menu4_2_3#></option>
                                    </select>
                                </div>

                                <div id="tab-area" style="margin-bottom: 0px; margin: -36px 8px 0px 8px;"></div>

                                <center>
                                <!--========= svg =========-->
                                <div class="span12" style="height: 300px;" id="chart">
                                    <svg width="100%" height="100%" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    id="svgraph"
                                    onload="init()">
                                    <rect x="0" y="0" width="100%" height="100%" style="fill:#ffffff" id="background"/>

                                    <g id="hori">
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="25%" x2="100%" y2="25%" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="50%" x2="100%" y2="50%" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="75%" x2="100%" y2="75%" />
                                    </g>

                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick0" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick1" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick2" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick3" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick4" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick5" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick6" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick7" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick8" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick9" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick10" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick11" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick12" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick13" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick14" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick15" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick16" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick17" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick18" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick19" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick20" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick21" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick22" />
                                    <line stroke-width="1" stroke="#AAAAAA" x1="0" y1="0%" x2="0" y2="100%" id="tick23" />

                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h0" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h1" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h2" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h3" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h4" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h5" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h6" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h7" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h8" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h9" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h10" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h11" />
                                    <text font-family="Verdana" fill="#114A8A" font-size="11" x="0" y="98%" class="tickH" id="h12" />

                                    <g id="xpst">
                                    	<text font-family="Verdana" fill="#114A8A" font-size="11" x="10" y="28%" id="xpst0" />
                                    	<text font-family="Verdana" fill="#114A8A" font-size="11" x="10" y="53%" id="xpst1" />
                                    	<text font-family="Verdana" fill="#114A8A" font-size="11" x="10" y="78%" id="xpst2" />
                                    	<text font-family="Verdana" fill="#114A8A" font-size="11" x="10" y="3%" id="xpst3" />
                                    </g>

                                    <polyline id="polyTx" style="stroke-width:1" points="" />
                                    <polyline id="polyRx" style="stroke-width:1" points="" />

                                    <g id="pointGroup">
                                    	<rect fill="#fff" opacity="0.8" x="490" y="0" width="283" height="20" id="pointTextBack" class="back" />
                                    	<text font-family="Verdana" font-size="11" fill="#114A8A" x="99%" y="12" id="pointText" />
                                    </g>

                                    <g id="cross">
                                    	<line stroke-width="1" stroke="#114A8A" x1="0" y1="0" x2="0" y2="0" id="crossX" />
                                    	<line stroke-width="1" stroke="#114A8A" x1="0" y1="0" x2="0" y2="0" id="crossY" />
                                    	<rect fill="#114A8A" opacity="0.8" x="0" y="100" width="0" height="35" id="crossTextBack" class="back" />
                                    	<text font-family="Verdana" font-size="11" fill="#fff" x="0" y="-50" id="crossTime" />
                                    	<text font-family="Verdana" font-size="11" fill="#fff" x="0" y="0" id="crossText" />
                                    </g>

                                    </svg>
                                </div>
                                <!--========= svg =========-->
                                </center>

                                <table width="100%" cellpadding="4" cellspacing="0" class="table">
                                    <tr>
                                        <td colspan="2">
                                            <table width="100%" align="center" cellpadding="4" cellspacing="0" class="table">
                                                <tr>
                                                    <th width='8%'><#Network#></th>
                                                    <th width='8%'><#Color#></th>
                                                    <th width='8%' style="text-align: right"><#Current#></th>
                                                    <th width='8%' style="text-align: right"><#Average#></th>
                                                    <th width='8%' style="text-align: right"><#Maximum#></th>
                                                    <th width='8%' style="text-align: right"><#Total#></th>
                                                </tr>
                                                <tr>
                                                    <td width='8%' style="text-align:center; vertical-align: middle;"><#Downlink#></td>
                                                    <td width='10%' style="text-align:center; vertical-align: middle;">
                                                        <div id='rx-sel' class="span12" style="border-radius: 5px;">
                                                            <ul id="navigation-1"><b style='border-bottom: 4px solid; display: none;' id='rx-name'></b>
                                                               <li>
                                                                 <!-- @todo <a title="Color" style="color:#B7E1F7;"><i class="icon icon-chevron-up"></i></a>
                                                                  <ul class="navigation-2">
                                                                     <li><a title="Orange" style="background-color:#FF9000;" onclick="switchColorRX(0)"></a></li>
                                                                     <li><a title="Blue" style="background-color:#003EBA;" onclick="switchColorRX(1)"></a></li>
                                                                     <li><a title="Black" style="background-color:#000000;" onclick="switchColorRX(2)"></a></li>
                                                                     <li><a title="Red" style="background-color:#dd0000;" onclick="switchColorRX(3)"></a></li>
                                                                     <li><a title="Gray" style="background-color:#999999;" onclick="switchColorRX(4)"></a></li>
                                                                     <li><a title="Green" style="background-color:#118811;"onclick="switchColorRX(5)"></a></li>
                                                                  </ul> -->
                                                               </li>
                                                            </ul>
                                                        </div>
                                            		</td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right;font-weight: bold;"><span id='rx-current'></span></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='rx-avg'></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='rx-max'></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='rx-total'></td>
                                                </tr>
                                                <tr>
                                                    <td width='8%' style="text-align:center; vertical-align: middle;"><#Uplink#></td>
                                                    <td width='10%' style="text-align:center; vertical-align: middle;">
                                                        <div id='tx-sel' class="span12" style="border-radius: 5px;">
                                                            <ul id="navigation-1"><b style='border-bottom: 4px solid; display: none;' id='tx-name'></b>
                                                               <li>
                                                                  <!-- @todo <a  title="Color" style="color:#B7E1F7;"><i class="icon icon-chevron-up"></i></a>
                                                                  <ul class="navigation-2">
                                                                     <li><a title="Orange" style="background-color:#FF9000;" onclick="switchColorTX(0)"></a></li>
                                                                     <li><a title="Blue" style="background-color:#003EBA;" onclick="switchColorTX(1)"></a></li>
                                                                     <li><a title="Black" style="background-color:#000000;" onclick="switchColorTX(2)"></a></li>
                                                                     <li><a title="Red" style="background-color:#dd0000;" onclick="switchColorTX(3)"></a></li>
                                                                     <li><a title="Gray" style="background-color:#999999;" onclick="switchColorTX(4)"></a></li>
                                                                     <li><a title="Green" style="background-color:#118811;"onclick="switchColorTX(5)"></a></li>
                                                                  </ul> -->
                                                               </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right;font-weight: bold;"><span id='tx-current'></span></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='tx-avg'></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='tx-max'></td>
                                                    <td width='15%' align='center' valign='top' style="text-align:right" id='tx-total'></td>
                                                </tr>
                                             </table>
                                        </td>
                                    </tr>
                                </table>

                                <div style="display: none;">
                                    <table width="100%" align="center" cellpadding="4" cellspacing="0" class="table">
                                        <thead>
                                            <tr>
                                                <td colspan="5" id="TriggerList">Display Options</td>
                                            </tr>
                                        </thead>

                                        <div id='bwm-controls'>
                                            <tr>
                                                <th width='50%'><#Traffic_Avg#></th>
                                                <td>
                                                    <a href='javascript:switchAvg(1)' id='avg1'>Off</a>,
                                                    <a href='javascript:switchAvg(2)' id='avg2'>2x</a>,
                                                    <a href='javascript:switchAvg(4)' id='avg4'>4x</a>,
                                                    <a href='javascript:switchAvg(6)' id='avg6'>6x</a>,
                                                    <a href='javascript:switchAvg(8)' id='avg8'>8x</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><#Traffic_Max#></th>
                                                <td>
                                                    <a href='javascript:switchScale(0)' id='scale0'>Uniform</a>,
                                                    <a href='javascript:switchScale(1)' id='scale1'>Per IF</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><#Traffic_Color#></th>
                                                <td>
                                                        <a href='javascript:switchDraw(0)' id='draw0'>Solid</a>,
                                                        <a href='javascript:switchDraw(1)' id='draw1'>Line</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <td>
                                                        <a href='javascript:switchColor()' id='drawcolor'>-</a><a href='javascript:switchColor(1)' id='drawrev'><#Traffic_Reverse#></a>
                                                </td>
                                            </tr>
                                        </div>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="footer"></div>
</form>
</body>
</html>
